<style>
    .selectDiv {
        width: 130px;
        display: inline-block;
        padding: 8px;
        font-size: 14px;
        line-height: 1.5;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .selectDiv:hover,
    .selectDiv:focus {
        border-color: #409eff;
    }

    .selectDiv:focus {
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
    label {
        font-size: 1.2rem;
        margin-right: 10px;
    }

    input {
        font-size: 1rem;
        padding: 8px;
    }

    .export-btn {
        width: 199px;
        margin-top: 20px;
        display: inline-block;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        transition: background-color 0.3s;
        border: 1px solid #409eff;
        color: #409eff;
        background-color: #fff;
        border-radius: 4px;
    }

    .export-btn:hover {
        background-color: #409eff;
        color: #fff;
    }
    .date-input {
        display: inline-block;
        padding: 8px;
        font-size: 14px;
        line-height: 1.5;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .date-input:hover,
    .date-input:focus {
        border-color: #409eff;
    }

    .date-input:focus {
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
    .alert{
        color:#f75444 ;
    }
</style>
{literal}

<div id="app" >
    <div>
        <div style="margin-bottom: 20px;">
            <label for="datepicker">选择状态:</label>
            <select class="selectDiv" v-model="state" placeholder="请选择">
                <option v-for="item in options" v-text="item.label" :value="item.value">
                </option>
            </select>
            <span class="alert" v-if="stateAlert" v-text="stateAlert"></span>
        </div>
        <div style="margin-bottom: 20px;">
            <label for="datepicker">选择商品</label>
            <select class="selectDiv" v-model="good" placeholder="请选择">
                <option v-for="item in goods" v-text="item.description" :value="item.id">
                </option>
            </select>
            <span class="alert" v-if="stateAlert" v-text="stateAlert"></span>
        </div>
        <div>
            <div>
                <label for="datepicker">选择时间:</label>
                <input type="date" id="datepicker" v-model="selectedDate" class="date-input" @change="displaySelectedDate()">
            </div>
            <span class="alert" v-if="DateAlert" v-text="DateAlert"></span>
        </div>
    </div>

    <button class="export-btn" @click="daochu">导出</button>
</div>
{/literal}